<template>
  <div class="masen-scheme">
    <banner-first></banner-first>
    <div class="scheme-warp">
      <div class="masen-container">
        <div class="scheme-warp-main">
          <div class="scheme-warp-title">
            已为以下行业定制企业增长方案
          </div>
          <div class="scheme-list">
            <div class="scheme-list-item">
              <div class="scheme-list-img">
                <img v-lazy="'/imgs/scheme/scheme-case-01.png'" >
              </div>
              <div class="scheme-list-font">
                <h4>保险</h4>
                <p>保险推荐、客服接待、客户回访、续保提醒</p>
              </div>
            </div>
            <div class="scheme-list-item">
              <div class="scheme-list-img">
                <img v-lazy="'/imgs/scheme/scheme-case-02.png'" >
              </div>
              <div class="scheme-list-font">
                <h4>电商</h4>
                <p>灵活外呼、客户分级、意向线索转化、语音质检</p>
              </div>
            </div>
            <div class="scheme-list-item">
              <div class="scheme-list-img">
                <img v-lazy="'/imgs/scheme/scheme-case-03.png'" >
              </div>
              <div class="scheme-list-font">
                <h4>房地产</h4>
                <p>房地产  商铺租赁、楼盘推荐、房产中介、房屋装修</p>
              </div>
            </div>
            <div class="scheme-list-item">
              <div class="scheme-list-img">
                <img v-lazy="'/imgs/scheme/scheme-case-04.png'" >
              </div>
              <div class="scheme-list-font">
                <h4>广告</h4>
                <p>品牌推广、渠道销售、案例展示、客户沉淀</p>
              </div>
            </div>
          </div>
          <div class="scheme-list">
            <div class="scheme-list-item">
              <div class="scheme-list-img">
                <img v-lazy="'/imgs/scheme/scheme-case-05.png'" >
              </div>
              <div class="scheme-list-font">
                <h4>互联网</h4>
                <p>网络推广、媒体广告、客户线索、用户调研</p>
              </div>
            </div>
            <div class="scheme-list-item">
              <div class="scheme-list-img">
                <img v-lazy="'/imgs/scheme/scheme-case-06.png'" >
              </div>
              <div class="scheme-list-font">
                <h4>教育</h4>
                <p>课程网销、客服接待、试听邀约、课后回访</p>
              </div>
            </div>
            <div class="scheme-list-item">
              <div class="scheme-list-img">
                <img v-lazy="'/imgs/scheme/scheme-case-07.png'" >
              </div>
              <div class="scheme-list-font">
                <h4>金融</h4>
                <p>金融贷款、银行催收、投资理财、开户邀请</p>
              </div>
            </div>
            <div class="scheme-list-item">
              <div class="scheme-list-img">
                <img v-lazy="'/imgs/scheme/scheme-case-08.png'" >
              </div>
              <div class="scheme-list-font">
                <h4>汽车</h4>
                <p>试驾邀约、活动推荐、意向线索转化、车主服务</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import NavHeader from './components/NavHeader'
import BannerFirst from './components/BannerFirst'
export default {
  name: 'scheme',
  components: { BannerFirst }
}
</script>

<style lang="scss">
  @import "../assets/scss/mixin.scss";
  @import "../assets/scss/button";
.masen-scheme{

  .scheme-warp{
    margin-top: 80px;
    .masen-container{
      .scheme-warp-main{
        .scheme-warp-title{
          text-align: center;
          font-size: 30px;
          color: #333333;
          padding-bottom: 40px;
          &:after{
            content: '';
            margin: 30px auto 0px auto;
            @include borderSet(40px,2px);

          }
        }
        .scheme-list{
          display: flex;
          justify-content: center;
          padding-top: 30px;
          .scheme-list-item{
            cursor: pointer;
            width: 265px;
            text-align: center;
            margin-right: 35px;
            box-shadow: 0px 0px 6px #e8e3e3;
            &:last-child{
              margin-right: 0px;
            }
            .scheme-list-img{
              img{
                width: 265px;
                height: 205px;
              }
            }
            .scheme-list-font{
              text-align: center;
              padding: 30px 15px 70px 15px;
              h4{
                color: #525252;
                font-size: 30px;
              }
              p{
                color: #666666;
                font-size: 16px;
                text-align: left;
                margin-top: 30px;
              }
            }
            &:hover{
              background: #134B9F;
              transition: all 0.5s;
              h4{
                color: #FFFFFF;
              }
              p{
                color: #FFFFFF;
              }
            }
          }
        }
      }
    }
  }
}

</style>
